import React from "react";

const Button = ({onClick, children}:  {onClick: () => void, children: React.ReactNode}) => {
	return  (
		<button onClick={onClick}>
			{children}
		</button>
	);
}

const HandleClick = (movieName:string) => {
	console.log(`Playing ${movieName}`);
}

const PlayButton = ({movieName } : { movieName: string }) => {
	return  (
		<Button onClick={() => HandleClick(movieName)}>
			Play "{movieName}"
		</Button>
	);
}

const UpdateButton = ({movieName } : { movieName: string }) => {
	return  (
		<Button onClick={() => alert('uploading !')}>
			Update Image  for "{movieName}"
		</Button>
	);
}

const ToolBarEvent = () => {
	return (
		<div>
			<PlayButton movieName="Kiki's Delivery Service" />
			<UpdateButton movieName="Amadeus" />
		</div>
	);
}

export default ToolBarEvent;